<!--
 作者：ex_baiyc
 日期：2016-10-11
 功能：产品监控-爆款产品-表格, 点击添加/删除 到对比列表中, 点击行可跳转至对应产品详细信息页面
 参数：
 事件：
-->
<template>
  <div class="table-view">
    <p class="table-title" v-if="tabletitle">{{tableTitle}}</p>
    <table class="table-head">
      <thead>
      <tr>
        <th v-for="item in thead"
            @click="sortBy(item)">
          {{item}}
        </th>
      </tr>
      </thead>
    </table>
    <div class="table-content">
      <table>
        <tbody>
        <tr v-for="row in tableRowsTemp | orderBy sortBykey sortOrders[sortKey]"
            :id="row.id"
            v-link="{path: '/industry/productInfo?brand=' + row.brand
            + '&model=' + row.model
            + '&model_id=' + row.model_id
            + '&category=' + row.category
            + '&category_id=' + row.category_id
            + '&org_code=' + orgCode}">
          <td v-for="item in gridColumns"
              :class="[{'firstcol': $index == 0}]">
            <span v-if="row[item] === true"
                  @click="del($event, $parent.row.category_id, $parent.row.model, $parent.row.brand, $parent.row.index)"
                  class="joined"><icon type="success"></icon></span>
            <span v-if="row[item] === false"
                  @click="add($event, $parent.row.category_id, $parent.row.model, $parent.row.brand, $parent.row.index)"
                  class="notjoined"><icon
              type="success"></icon></span>
            <span v-if="row[item] !== 'true' && row[item] !== 'false'">{{row[item] | isBoolean}}</span>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  import Icon from 'vux/dist/components/icon'
  export default{
    components: {Icon},
    props: ['tableTitle', 'thead', 'gridColumns', 'tableRows', 'tableHeight', 'orgCode'],
    computed: {
      tableRowsTemp () {
        return this.tableRows.map((item, index) => {
          item.index = index
          return item
        })
      }
    },
    data () {
      var sortOrders = {}
      this.gridColumns.forEach(function (key) {
        sortOrders[key] = 1
      })
      return {
        sortKey: '',
        sortOrders: sortOrders
      }
    },
    methods: {
      sortBykey: function (a, b) {
        if (this.sortKey) {
          return parseFloat(a[this.sortKey]) - parseFloat(b[this.sortKey])
        } else {
          return a.index - b.index
        }
      },
      sortBy: function (key) {
        var activeTheadIndex = 0
        for (var i = 0; i < this.thead.length; i++) {
          if (this.thead[i] === key) {
            activeTheadIndex = i
          }
        }
        this.sortKey = this.gridColumns[activeTheadIndex]
        this.sortOrders[this.gridColumns[activeTheadIndex]] = this.sortOrders[this.gridColumns[activeTheadIndex]] * -1
      },
//      添加至对比列表
      add: function (event, category, model, brand) {
        event.stopPropagation()
        // if (this.$parent.contranstSize === 5) {
        //   window.alert('最多添加5个产品！')
        //   return
        // }
        var i = event.target.parentNode.parentNode.parentNode.rowIndex
        // this.tableRows[i].contrast = true
        this.tableRows.forEach(item => {
          if (item.model === model) {
            item.contrast = true
            return
          }
        })
        this.$parent.contranstSize++
        this.$http.post(window.interface.productMonitor.add, {'category_id': category, 'model': model, 'brand': brand}).then((res) => {
          var data = res.json()
          if (data.success !== true) {
            this.tableRows[i].contrast = false
            this.$parent.contranstSize--
            window.alert(data.message)
          }
          // if (data.success === true) {
          //   var i = event.target.parentNode.parentNode.parentNode.rowIndex
          //   this.tableRows[i].contrast = true
          //  // 更新父组件(爆款产品)中对比列表中产品个数
          //   this.$parent.contranstSize++
          // }
        })
      },
//      从对比列表中删除
      del: function (event, category, model, brand) {
        event.stopPropagation()
        var i = event.target.parentNode.parentNode.parentNode.rowIndex
        // this.tableRows[i].contrast = false
        this.tableRows.forEach(item => {
          if (item.model === model) {
            item.contrast = false
            return
          }
        })
        this.$parent.contranstSize--
        this.$http.post(window.interface.productMonitor.delete, {'category_id': category, 'model': model, 'brand': brand}).then((res) => {
          var data = res.json()
          if (data.success !== true) {
            this.tableRows[i].contrast = true
            window.alert(data.message)
          }
        })
      }
    },
    events: {},
    ready: function () {
    },
    watch: {},
    filters: {
//      如果值为boolean,则显示空
      isBoolean: function (val) {
        if (val === true || val === false) {
          return ''
        } else {
          return val
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .table-view {

  .table-head {
    height: 7vh;
    font-weight: 500;

    th{
      vertical-align: middle !important;
    }

    th:nth-child(1) {
      width: 7%;
    }
    th:nth-child(2) {
      width: 20%;
    }

    th:nth-child(3) {
      width: 12%;
    }

    th:nth-child(4) {
      width: 12%;
    }

    th:nth-child(5) {
      width: 15%;
    }
    th:nth-child(6) {
      width: 15%;
    }
  }
  .table-content {
    height: 57vh;
    overflow-y: scroll;
    background: rgba(244, 249, 255, 4);
  }

  .firstcol {
    width: 18%;
    border-right: 1px solid #e5e5e5;
    background: #FFF;
  }

  .notjoined .weui_icon_success:before {
    color: #D8D8D8;
  }

  .joined .weui_icon_success:before {
    color: #4A90E2;
  }

  table {
    border-collapse: collapse;
    width: 100%;
    table-layout:fixed;

  thead {
    color: #999;
    background: rgba(188, 219, 255, .4);

  th {
    border-right: none !important;
    font-weight: 500;
    font-size: .28rem;
  }

  }

  tr {
    height: 1rem;

    td:nth-child(1) {
      width: 7%;
    }
    td:nth-child(2) {
      width: 20%;
    }

    td:nth-child(3) {
      width: 12%;
    }

    td:nth-child(4) {
      width: 12%;
    }

    td:nth-child(5) {
      width: 15%;
    }
    td:nth-child(6) {
      width: 15%;
    }

  td {
    padding: .1rem;
    text-align: center;
    font-size: .26rem;
    vertical-align: middle !important;
    overflow: hidden;
    word-wrap:break-word;
  }

  }
  }
  }

</style>
